import { type AlovaMethodHandler } from "alova/client";
import type { TableProps } from "ant-design-vue";
import type { Reactive } from "vue";

import { usePaging } from "./usePage";

/**
 * ant-design-vue table 组件分页 hook，基于 alova
 * @param {Function} methodHandler 请求方法，alova Method 实例
 * @param {Object} searchForm 搜索表单参数
 * @param {number} size 每页显示条数，默认 10 条
 * @returns {Object} 返回分页相关数据和方法
 *   @property {Array} list - 数据列表
 *   @property {Object} pagination - antdv table 组件分页配置对象
 *   @property {number} page - 当前页码
 *   @property {number} pageSize - 每页数量
 *   @property {number} total - 总数据量
 *   @property {boolean} loading - 加载状态
 *   @property {number} pageCount - 总页数
 *   @property {number} isLastPage - 是否最后一页
 *   @property {Object} extend - 扩展数据字段
 *   @property {Function} send - 请求分页接口函数
 *   @property {Function} sendForLatestData - 发送请求并返回当前页最新数据（击穿缓存）
 *   @property {Function} handleReset - 清空查询表单参数发起请求并回到第一页
 *   @property {Function} handleSearch - 搜索函数，携带查询表单表单发起请求并回到第一页
 *   @property {Function} handleTableChangeForPaging - antdv table 发生分页、排序、筛选变化时触发该回调函数
 * @example
 * const searchForm = reactive( name: "", code: "" });
 * const {list, loading, pagination, sendForLatestData, handleReset, handleSearch, handleTableChangeForPaging } = useAntdvPaging(Apis.CategoryAdmin.page, searchForm);
 */
export const useAntdvPaging = <RowDataType = any>(
    methodHandler: AlovaMethodHandler,
    searchForm: Reactive<Record<string, any>> = {},
    size = 10
) => {
    const {
        loading,
        list,
        page,
        pageSize,
        total,
        pageCount,
        isLastPage,
        extend,
        send,
        sendForLatestData,
        handleReset,
        handleSearch
    } = usePaging<RowDataType>(methodHandler, searchForm, size);

    // antdv table 中的分页配置对象
    const pagination = computed<TableProps["pagination"]>(() => ({
        showSizeChanger: true, // 显示分页大小切换器
        defaultPageSize: size, // 默认每页显示条数
        // showTotal: (total, range) => `共 ${total} 条数据`,
        showQuickJumper: true, // 显示快速跳转
        showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, // 显示分页信息
        showLessItems: true, // 显示省略号
        total: total.value, // 总数
        current: page.value, // 当前页码
        pageSize: pageSize.value // 每页显示条数
    }));

    // 	antdv table 发生分页、排序、筛选变化时触发该回调函数
    // 此处仅处理分页逻辑（分页改变时发送请求），当仅需处理分页时，可将该函数直接赋给 antdv table 的 onChange 属性
    const handleTableChangeForPaging: TableProps["onChange"] = (pag, _filters, _sorter) => {
        const { current, pageSize } = pag;
        send(searchForm, current, pageSize);
    };

    return {
        loading,
        list,
        page,
        pageSize,
        total,
        pageCount,
        isLastPage,
        extend,
        pagination,
        handleTableChangeForPaging,
        send,
        sendForLatestData,
        handleReset,
        handleSearch
    };
};
